<template>
  <div class="page-container container" v-loading="state.loading">
    
    <!-- 账单主体信息 -->
    <div class="detailContent">
      <div class="topBox">
        <div class="codebox">发票编号：{{ state.info.doccode }}</div>
        <div v-if="state.info.docstatus == 0" class="status statusType1">
          草拟
        </div>
        <div v-if="state.info.docstatus == 1" class="status statusType2">
          待对账
        </div>
        <div v-if="state.info.docstatus == -1" class="status statusType3">
          已驳回
        </div>
        <div v-if="state.info.docstatus == 2" class="status statusType4">
          已对账
        </div>
      </div>
      <div class="messBox">
        <div class="messItem">
          <div class="messLabel">结算单位：</div>
          <div class="messValue">{{ state.info.entFullname }}</div>
        </div>
        <!-- <div class="messItem">
          <div class="messLabel">对方账户：</div>
          <div class="messValue">{{ state.info.bankAccount }}</div>
        </div>
        <div class="messItem">
          <div class="messLabel">收付类型：</div>
          <div class="messValue">
            {{ state.info.doctype == 0 ? "应付" : "应收" }}
          </div>
        </div> -->
      </div>

      <div class="messBox">
        <div class="messItem">
          <div class="messLabel">创建时间：</div>
          <div class="messValue">{{ state.info.createTime }}</div>
        </div>
        <div class="messItem">
          <div class="messLabel">创建人员：</div>
          <div class="messValue">{{ state.info.createBy }}</div>
        </div>
        <div class="messItem">
          <div class="messLabel">修改时间：</div>
          <div class="messValue">{{ state.info.updateTime }}</div>
        </div>
        <div class="messItem">
          <div class="messLabel">修改人员：</div>
          <div class="messValue">{{ state.info.updateBy }}</div>
        </div>
      </div>
    </div>
    <!-- 操作按钮栏 -->
    <div class="tab-box in-container" v-if="state.info.docstatus != 2">
      <el-button link @click="save" type="primary"> 保存 </el-button>
      <el-button link @click="refresh" type="primary"> 刷新 </el-button>
    </div>
    <!-- 账单信息 -->
    <div class="detailContent">
      <div class="detailTop">
        <span class="detailTopTitleIcon"></span>
        <span class="detailTopTitle">账单信息</span>
      </div>
      <div class="billBox">
        <el-form label-width="80" :size="'small'" :inline="true">
          <el-row>
            <el-col :span="6">
              <el-form-item label="对方账户" required>
                <el-select
                  v-model="state.info.bankAccount"
                  placeholder="请选择币种"
                  style="width: 239px"
                  clearable
                  filterable
                >
                  <el-option label="665533224488" value="665533224488"></el-option>
                  <el-option label="665533224489" value="665533224489"></el-option>
                  <el-option label="665533224484" value="665533224484"></el-option>
                  <el-option label="665533224483" value="665533224483"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发票类型" required>
                <el-select
                  v-model="state.info.invoiceType"
                  placeholder="请选择发票类型"
                  style="width: 239px"
                  clearable
                  filterable
                >
                  <el-option label="增值税专用发票" value="增值税专用发票"></el-option>
                  <el-option label="普通发票" value="普通发票"></el-option>
                  <el-option label="机动车专用发票" value="机动车专用发票"></el-option>
                  <el-option label="机打发票" value="机打发票"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发票号码">
                <el-input
                  v-model="state.info.invoiceNumber"
                  placeholder="请输入发票号码"
                  style="width: 100%"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发票日期" prop="doccode">
                <el-date-picker
                  v-model="state.info.date"
                  type="date"
                  placeholder="请选择"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="账单币种">
                <el-select
                  v-model="state.info.currencyCode"
                  placeholder="请选择币种"
                  style="width: 239px"
                  clearable
                  filterable
                  remote
                  :remote-method="getCurrentData"
                  :loading="state.currentLoading"
                  v-if="state.info.docstatus != 2"
                >
                  <el-option
                    v-for="item in state.current"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span style="float: left"> {{ item.label }}</span>
                  </el-option>
                </el-select>
                <span v-else>{{ state.info.currencyCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="账单金额">
                <el-input
                  v-model="state.info.money"
                  placeholder="请输入账单金额"
                  style="width: 170px"
                  @input="
                    state.info.money = validateOnlyNumber(state.info.money)
                  "
                  @change="moneyChange"
                  v-if="state.info.docstatus != 2"
                ></el-input>
                <el-button v-if="state.info.docstatus != 2" type="text" @click="SynchronousFee">同步进费用</el-button>
                <span v-if="state.info.docstatus == 2">{{ state.info.money }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="账单备注">
                <el-input
                  type="textarea"
                  v-model="state.info.memo"
                  :rows="3"
                  placeholder="请输入"
                  v-if="state.info.docstatus != 2"
                >
                </el-input>
                <span v-if="state.info.docstatus == 2">{{ state.info.memo }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 费用信息 -->
    <div class="detailContent">
      <div class="detailTop">
        <span class="detailTopTitleIcon"></span>
        <span class="detailTopTitle">发票明细</span>
      </div>
      <div class="btnBox">
        <el-button v-if="state.info.docstatus != 2" type="primary" @click="openAdd">添加明细</el-button>
        <el-button v-if="state.info.docstatus != 2" @click="delFee">删除明细</el-button>
        <div class="priceBox">
          <div class="priceIcon"></div>
          <div class="priceItem">
            汇总金额：<span>{{ state.allprice }}</span>
          </div>
          <div class="priceItem">
            出账金额：<span>{{ state.outprice }}</span>
          </div>
        </div>
        <el-button v-if="state.info.docstatus != 2" @click="feerefrsh"><el-icon style="margin-right: 4px;"><RefreshRight /></el-icon>刷新</el-button>
      </div>
      <div class="tableBox">
        <el-table
          stripe
          border
          size="small"
          ref="tableRef"
          height="100%"
          :data="state.FeeList"
          :cell-class-name="tableCellClassName"
          @selection-change="handleSelectionChange"
        >
          <el-table-column width="50" type="selection" fixed="left" />

          <el-table-column label="收发类型" align="center" showOverflowTooltip>
            <template #default="scope">
              <span>
                {{ scope.row.doctype == 0 ? "应付" : "应收" }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            label="结算单位"
            prop="entFullname"
            align="center"
            showOverflowTooltip
          ></el-table-column>

          <el-table-column
            label="主提单号"
            prop="blNo"
            align="center"
            showOverflowTooltip
          ></el-table-column>

          <el-table-column
            label="费用名称"
            prop="feeName"
            align="center"
            showOverflowTooltip
          ></el-table-column>

          <el-table-column
            label="费用币种"
            prop="currency"
            align="center"
            showOverflowTooltip
          ></el-table-column>

          <el-table-column
            label="费用汇率"
            prop="exchangeRate"
            align="center"
            showOverflowTooltip
          ></el-table-column>

          <el-table-column
            label="费用金额"
            prop="totalmoney"
            align="center"
            showOverflowTooltip
          ></el-table-column>

          <el-table-column
            label="账单金额"
            prop="billmoney"
            align="center"
            showOverflowTooltip
          >
            <template #default="scope">
              <el-input
                v-model="scope.row.billmoney"
                class="alignCenter"
                @input="
                  scope.row.billmoney = validateOnlyNumber(scope.row.billmoney)
                "
                @change="handleRowChange(scope.row)"
                v-if="state.info.docstatus != 2"
              ></el-input>
              <span v-else>{{ scope.row.billmoney }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="业务人员"
            prop="entFullname"
            align="center"
            showOverflowTooltip
          >
            <template #default="scope">
              {{ scope.row.sales?.username }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 明细弹窗 -->
    <el-dialog
      v-model="state.show"
      title="添加明细"
      width="1200px"
      modal-class="finacial-dailog"
      @close="FeeReset"
    >
      <div style="height: 100%">
        <div class="from-container">
          <AppSearchForm @submit="getFeeList()" @reset="FeeReset()">
            <el-row>
              <el-col :span="6">
                <el-form-item label="收付类别">
                  <el-select v-model="state.query.isIncome" disabled>
                    <el-option label="应收" :value="1"></el-option>
                    <el-option label="应付" :value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="结算单位">
                  <el-input
                    v-model="state.info.entFullname"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="发票币种">
                  <el-input
                    v-model="state.info.currencyCode"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="核销状态">
                  <el-select v-model="state.query.feeStatus" disabled>
                    <el-option label="未核销" :value="0"></el-option>
                    <el-option label="已核销" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="收付编号">
                  <el-input
                    v-model="state.query.blNo"
                    clearable
                    placeholder="请输入"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="账单编号">
                  <el-input
                    v-model="state.query.blNo"
                    clearable
                    placeholder="请输入"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="提单号">
                  <el-input
                    v-model="state.query.blNo"
                    clearable
                    placeholder="请输入"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="6">
                <el-form-item label="实际开航">
                  <el-date-picker
                    v-model="atdTime"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="width: 100%"
                    size="small"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </AppSearchForm>
        </div>

        <el-row :gutter="12">
          <el-col :span="9">
            <div class="table-container">
              <div class="searchBox">
                <div class="searchlabel">查询方式：</div>
                <el-select size="small" style="flex: 1;" v-model="state.search.type">
                  <el-option label="按账单" :value="1"></el-option>
                  <el-option label="按收付" :value="2"></el-option>
                  <el-option label="按提单号" :value="3"></el-option>
                </el-select>
              </div>
              <AppPageTable
                stripe
                :data="state.tableData.data"
                @change="getFeeList"
                :height="'400'"
                :option="state.tableData.option"
                @update:option="upDataOption"
                v-loading="state.tableDataLoading"
              >
                <el-table-column
                  type="radio"
                  width="55"
                  align="center"
                  fixed="left"
                />

                <el-table-column
                  prop="blNo"
                  label="账单编号"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop="blNo"
                  label="账单日期"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop="blNo"
                  label="账单状态"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>

                
              </AppPageTable>
            </div>
          </el-col>
          <el-col :span="15">
            <div class="table-container">
              <div class="searchBox">
                <div class="searchlabel">费用名称：</div>
                <el-input size="small" class="feeInput" v-model="state.search.feename"></el-input>
                <el-button type="primary" size="small"><el-icon><Search /></el-icon></el-button>
              </div>
              <AppPageTable
                stripe
                :data="state.tableData.data"
                @change="getFeeList"
                :height="'400'"
                :option="state.tableData.option"
                @update:option="upDataOption"
                v-loading="state.tableDataLoading"
              >
                <el-table-column
                  type="selection"
                  width="55"
                  align="center"
                  fixed="left"
                />

                <el-table-column
                  prop="blNo"
                  label="提单号"
                  show-overflow-tooltip
                  align="center"
                >
                </el-table-column>

                <el-table-column
                  prop="feeName"
                  label="费用名称"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                  prop="currency"
                  label="费用币种"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                  prop="currency"
                  label="费用汇率"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                  prop="totalmoney"
                  label="费用金额"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                  prop="getUnVerificationMoney"
                  label="待销金额"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column
                  prop="entFullname"
                  label="结算单位"
                  align="center"
                  show-overflow-tooltip
                >
                </el-table-column>

                <el-table-column label="收付类别" align="center">
                  <template #default="scope">
                    {{ scope.row.isIncome ? "应收" : "应付" }}
                  </template>
                </el-table-column>

                <el-table-column
                  prop="entFullname"
                  label="业务人员"
                  align="center"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    {{ scope.row.sales?.username }}
                  </template>
                </el-table-column>
              </AppPageTable>
            </div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <div class="button-container">
          <el-button type="default" @click="state.show = false">取消</el-button>
          <el-button type="primary" @click="selectOver">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, computed,toRaw } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/public/request";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import AppSearchForm from "@/components/AppSearchForm.vue";
import { decimal_NUM, validateOnlyNumber,Number_SubAll } from "@/utils/validate.js";
import { RefreshRight,Search } from "@element-plus/icons";

const Route = useRoute();
const Store = useStore();

const state = reactive({
  loading: false,
  info: {
    doccode: "112233",
    memo: "",
    entId: "",
    entFullname: "什么什么公司",
    docdate: "",
    docstatus: 0,
    doctype: 1,
    companyId: "",
    currencyCode: "",
    currencyName: "",
    version: "",
    bankAccount: "",
    bankName: "",
    bankAccountName: "",
    money: "",
    totalAmount: "",
    createBy: "孙向明",
    createTime: "2024-05-01 17:28",
    updateBy: "李今颖",
    updateTime: "2024-05-05 18:48",
    id: 0,
  },
  copyinfo: {
    doccode: "",
    memo: "",
    entId: "",
    entFullname: "",
    docdate: "",
    docstatus: 0,
    doctype: 1,
    companyId: "",
    currencyCode: "",
    currencyName: "",
    version: "",
    bankAccount: "",
    bankName: "",
    bankAccountName: "",
    money: "",
    totalAmount: "",
    createBy: "",
    createTime: "",
    updateBy: "",
    updateTime: "",
    id: 0,
  },
  FeeList: [],
  CopyFeeList: [],
  currentLoading: false,
  current: [],
  allprice: 0,
  outprice: 0,
  show: false,
  tableSelect: [],
  tableDataLoading: false,
  //表格数据
  tableData: {
    data: [],
    option: useTableOption(),
  },
  // 查询条件
  query: {
    // 收支类型 0 付款 1 收款
    isIncome: 0,
    // 结算单位
    entId: "",
    // 币种
    currency: "",

    // 预计开航
    etdDate: [],
    // 实际开航
    atdDate: [],
    // 提单号
    blNo: "",

    // 审核状态 0未审 1已审
    feeStatus: 0,
  },
  search: {
    feename: '',
    type: 1
  }
});

// 预计开航
const etdTime = computed({
  get: function () {
    return [state.query.etdDate[0], state.query.etdDate[1]];
  },
  set: function (val) {
    if (val) {
      state.query.etdDate[0] = val[0];
      state.query.etdDate[1] = val[1];
    } else {
      state.query.etdDate[0] = "";
      state.query.etdDate[1] = "";
    }
  },
});
// 实际开航
const atdTime = computed({
  get: function () {
    return [state.query.atdDate[0], state.query.atdDate[1]];
  },
  set: function (val) {
    if (val) {
      state.query.atdDate[0] = val[0];
      state.query.atdDate[1] = val[1];
    } else {
      state.query.atdDate[0] = "";
      state.query.atdDate[1] = "";
    }
  },
});

// 打开添加明细弹窗
const openAdd = async () => {
  // if (!state.info.currencyCode) {
  //   ElMessage.warning("请选择帐单币种");
  //   return;
  // }
  // await getFeeList();
  state.show = true;
};

const getFeeList = async () => {
  state.tableDataLoading = true;
  let res = await request.post("/api/docworkfee/getWorkFeeBalance", {
    PageIndex: state.tableData.option.page,
    PageSize: state.tableData.option.pageSize,
    ...state.query,
  });
  state.tableData.data = res.content;
  state.tableData.option.total = res.totalElements;
  state.tableDataLoading = false;
};
const FeeReset = () => {
  state.query.blNo = "";
  state.query.atdDate = [];
  state.query.etdDate = [];
};

const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  column.index = columnIndex;
  row.index = rowIndex;
};

/**
 * 选择后的数据
 */
const handleSelectionChange = (val) => {
  let arr = [];
  for (let item of val) {
    let ret = toRaw(item);
    if (ret !== undefined) {
      arr.push(ret);
    }
  }
  state.tableSelect = arr;
};

// 获取币种类型
const getCurrentData = async (val) => {
  state.currentLoading = true;
  let res = await request.get("/api/base/currency/dropdownlist", {
    keywords: val,
  });
  state.current = res.map((item) => {
    return {
      label: item.currencyCode + "|" + item.currencyName,
      value: item.currencyCode,
    };
  });
  state.currentLoading = false;
};

// 获取账单详情
const getInfo = async () => {
  let res = await request.get("/api/docbalance/GetBalanceInfo", {
    id: state.info.id,
  });
  for (let key in state.info) {
    state.info[key] = res.data.docBalancehd[key];
    state.copyinfo[key] = res.data.docBalancehd[key];
  }
  var price = 0;
  res.data.feeList.forEach((item) => {
    item.billmoney = item.totalmoney;
    price = decimal_NUM([price, item.totalmoney]);
  });
  state.FeeList = res.data.feeList;
  state.CopyFeeList = res.data.feeList;

  state.copyinfo.money = price;

  state.query.isIncome = state.info.doctype;
  state.query.entId = state.info.entId;
  state.query.currency = state.info.currencyCode;
  setAllPrice();
};

// 计算总金额
const setAllPrice = () => {
  var totalNum = 0,
    billNum = 0;
  state.FeeList.forEach((item) => {
    totalNum = decimal_NUM([totalNum, item.totalmoney]);
    billNum = decimal_NUM([billNum, item.billmoney]);
  });
  state.allprice = totalNum;
  state.outprice = billNum;

  state.info.money = billNum;
};

const handleRowChange = (row) => {
  if (row.billmoney > row.totalmoney) {
    row.billmoney = row.totalmoney;
  }
  if (!row.billmoney) {
    row.billmoney = 0;
  }
  setAllPrice();
};

const moneyChange = () => {
  if (state.info.money > state.allprice){
    state.info.money = state.allprice
  }
}

// 选中的表格数据
const selectOver = () => {
  let CpoySelectTableData = JSON.parse(
    JSON.stringify(state.tableData.option.selected)
  );
  let newArray = [];

  CpoySelectTableData.forEach((t) => {
    if (!state.FeeList.find((item) => t.id == item.id)) {
      newArray.push(t);
    }
  });
  newArray.forEach((item) => {
    item.billmoney = item.totalmoney;
    
  });

  state.FeeList = [...state.FeeList, ...newArray];
  state.show = false;
  setAllPrice();
};

// 删除明细
const delFee = () => {
  if (state.tableSelect.length == 0) {
    ElMessage.warning("请选择需要删除的费用明细");
    return;
  }
  ElMessageBox.confirm("是否确定执行删除操作？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let newArray = [];
    
    state.FeeList.forEach((t) => {
      if (!state.tableSelect.find((item) => t == item)) {
        newArray.push(t);
      }
    });

    state.FeeList = newArray;
    setAllPrice();
  });
};
// 费用列表刷新
const feerefrsh = () => {
  let feestatus = FeeEdit();
  if(feestatus){
    ElMessageBox.confirm("当前数据未保存，是否刷新？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      state.FeeList = state.CopyFeeList;
      ElMessage.success("成功");
    });
  }else{
    ElMessage.success("成功");
  }
}
// 同步进费用
const SynchronousFee = () => {
  if(!state.info.money){
    ElMessage.warning("请输入账单金额");
    return
  }
  ElMessageBox.confirm("是否确定执行同步操作？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    var SynchronousNum = state.info.money;
    state.FeeList.forEach(item => {
      item.billmoney = item.totalmoney < SynchronousNum?item.totalmoney:SynchronousNum;
      SynchronousNum = Number_SubAll(SynchronousNum , item.totalmoney) > 0?Number_SubAll(SynchronousNum , item.totalmoney):0;
    })
    setAllPrice();
  });
}

// 保存账单信息
const save = async () => {
  if(!state.info.currencyCode){
    ElMessage.warning("请选择帐单币种");
    return
  }
  if(!state.info.money){
    ElMessage.warning("请输入账单金额");
    return
  }
  if(state.FeeList.length == 0){
    ElMessage.warning("请至少选择一条费用明细");
    return
  }
  if(Number(state.info.money) !== Number(state.outprice)){
    ElMessage.warning("账单金额与出账金额不一致");
    return
  }
  let arr = state.FeeList.filter(item => {
    return item.billmoney == 0
  })
  if(arr.length > 0){
    ElMessage.warning("账单金额不可为0")
    return
  }
  var req = JSON.parse(JSON.stringify(state.info));
  let reqFee = state.FeeList.map(item => {
    return {
      feeId: item.id,
      totalMoney: item.totalmoney,
      balanceMoney: item.billmoney
    }
  })
  req.fees = reqFee;
  let res = await request.post('/api/docbalance/createBalance',{
    ...req
  })
  if(res.status){
    ElMessage.success("成功");
  }else{
    ElMessage.warning(res.message);
  }
}
// 刷新
const refresh = async () => {
  let res = isEdit();

  if(res){
    ElMessageBox.confirm("当前数据未保存，是否刷新？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      getInfo();
      ElMessage.success("成功");
    });
  }else{
    ElMessage.success("成功");
  }
}
const isEdit = () => {
  if(state.info.currencyCode !== state.copyinfo.currencyCode){
    return true;
  }

  if(Number(state.info.money) !== Number(state.copyinfo.money)){
    return true;
  }
  
  if(state.info.memo !== state.copyinfo.memo){
    return true;
  }
  
  let feestatus = FeeEdit();

  if(feestatus){
    return true
  }
  
  return false;
}
const FeeEdit = () => {
  var feeboolean = false;
  if(state.FeeList.length !== state.CopyFeeList.length){
    feeboolean = true;
  }
  
  state.FeeList.forEach((item,index)=>{
    if(Number(item.billmoney) !== Number(state.CopyFeeList[index].billmoney)){
      feeboolean = true
    }
  })

  return feeboolean
}

onMounted(() => {
  if (Route.query != {}) {
    state.info.id = Route.query.id;
    Store.dispatch("tab/modifyTabTitle", {
      path: Route.fullPath,
      title: Route.query.title,
    });
  }
  // getInfo();
});
</script>
<style lang="scss" scoped>
.tab-box {
  height: 38px;
  display: flex;
  align-items: center;
  padding: 0px 16px;
  border: none;
  border-radius: 2px;
  margin-bottom: 12px;

  :deep(.el-button) {
    font-size: 14px;
    margin: 0 10px;
  }
}
.container {
  display: flex;
  flex-direction: column;

  .content {
    flex: 1;
    height: auto;
    padding: 0 0 8px 0;
  }

  :deep(.el-radio-group) {
    height: 28px;
  }

  :deep(.el-radio) {
    margin-right: 15px;

    .el-radio__inner {
      width: 12px;
      height: 12px;
    }

    .el-radio__label {
      font-size: 12px;
    }
  }

  :deep(.el-form-item) {
    width: 100%;
  }

  :deep(.el-select) {
    // width: 100%;
  }

  :deep(.el-date-editor) {
    width: 100%;
  }

  :deep(.el-tabs) {
    height: 100%;

    .el-tabs__header {
      padding: 0 16px;
    }

    .el-tabs__content {
      height: calc(100% - 55px);

      .el-tab-pane {
        height: 100%;
      }
    }
  }

  .form {
    height: 100%;
  }
}
.detailContent {
  background: #ffffff;
  box-sizing: border-box;
  padding: 8px 12px;
  margin-bottom: 12px;
  .topBox {
    display: flex;
    align-items: center;
    .codebox {
      color: #000000d8;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: left;
      margin-right: 8px;
      font-weight: 600;
    }
    .status {
      border: 1px solid transparent;
      box-sizing: border-box;
      padding: 0 4px;
      font-size: 12px;
      line-height: 22px;
      letter-spacing: 0px;
      border-radius: 2px;
      margin-left: 8px;
    }
    .statusType1 {
      border-color: #d9d9d9;
      background: #d9d9d919;
      color: #00000099;
    }
    .statusType2 {
      border-color: #fa8c16;
      background: #fff7e6;
      color: #fa8c16;
    }
    .statusType3 {
      border-color: #f5222d;
      background: #fff1f0;
      color: #f5222d;
    }
    .statusType4 {
      border-color: #2cbe60;
      background: #eefbf3;
      color: #2cbe60;
    }
  }
}
.messBox {
  margin-top: 12px;
  display: flex;
  .messItem {
    width: 240px;
    display: flex;
    .messLabel {
      color: #00000099;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      margin-right: 4px;
      width: 60px;
    }
    .messValue {
      flex: 1;
      color: #00000099;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.detailTop {
  display: flex;
  align-items: center;
  .detailTopTitle {
    color: #000000d8;
    font-weight: 600;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0px;
    position: relative;
  }
  .detailTopTitleIcon {
    display: inline-block;
    height: 22px;
    width: 2px;
    background: #5a9cf8;
    margin-right: 8px;
  }
}
.billBox {
  margin-top: 8px;
}
.btnBox {
  margin-top: 8px;
  display: flex;
  .priceBox {
    display: flex;
    align-items: center;
    flex: 1;
    .priceIcon {
      background: #5a9cf8;
      width: 2px;
      height: 20px;
      margin-left: 12px;
      margin-right: 8px;
    }
    .priceItem {
      color: #000000d8;
      font-size: 12px;
      line-height: 20px;
      letter-spacing: 0px;
      margin-right: 24px;
    }
  }
}
.tableBox {
  margin-top: 12px;

  :deep(.el-table) {
    .el-table__header th {
      background-color: #f7f8fa;
    }

    .cell {
      height: 28px;
      line-height: 28px;
    }

    .el-checkbox {
      height: 28px;
    }
  }
  :deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner) {
    background-color: #409eff;
  }
  :deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after) {
    border-color: #ffffff;
  }
}

:deep(.finacial-dailog) {
  .el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
  }

  .el-dialog {
    min-width: 630px;
  }

  .el-dialog__footer {
    border-top: 1px solid #e8e8e8;
  }

  .el-dialog__body {
    padding-left: 0;
    padding-right: 0;
  }
}
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.from-container {
  border: 1px solid #e8e8e8;
  padding: 6px;
  margin-bottom: 8px;
}

.alignCenter {
  :deep(.el-input__inner) {
    text-align: center;
  }
}

.table-container{
  border-radius: 2px;
  border: 1px solid #E7E7E7;
  height: 500px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
}
.searchBox{
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.feeInput{
  width: 240px;
  margin-right: 8px;
}
</style>
